<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #menuDiv{
            border: 1px solid black;
            height: 300px;
            width: 800px;
            margin: auto;
        }
        #menuUl {
            display: flex;
        }
        #menuUl li{
            list-style: none;/*去掉选项圆点*/
            height: 30px;
            width: 200px;
            text-align: center;
            cursor: pointer;/*设置鼠标形状*/
            padding-top: 5px;
            padding-bottom: 5px;
            position: relative;
        }
        #menuUl li:hover {
            background-color: #737272;
            color: deeppink;
            font-weight: bold;
            margin: 0px;
        }
        #menuUl li div{
            height: 200px;
            width: 200px;
            position: absolute;
            padding-top: 20px;
            background-color: yellow;
            display: none;
        }
        #menuUl li:hover div{
            display: block;
        }
    </style>
</head>
<body>

<div id="menuDiv">
    <ul id="menuUl">
        <li>时尚
        <div>
            比舟山更浪漫的海滨小城<br>
            欧阳娜娜跨界艺术展开幕<br>
            穿出千禧复古风格
        </div>
        </li>

        <li>教育<div>
            考学有岸 读书无涯<br>
            各地做足功课迎开学<br>
            国考申论作文七大经典拟标题法
        </div></li>

        <li>体育<div>
            广州队宣布与林书豪签约<br>
            皇马已开始考虑未来引援计划<br>
            哈兰德为何选择曼城而非皇马?
        </div></li>
    </ul>

</div>

</body>
</html>